<template>
  <!-- 临时调试信息 -->
  <div class="debug-info" style="position: fixed; top: 0; left: 0; background: red; color: white; padding: 10px; z-index: 9999; font-size: 12px;">
    DEBUG: SmartEvaluation 组件已渲染 - {{ new Date().toLocaleTimeString() }}
  </div>
  
  <div class="container" style="min-height: 100vh; background: #F5F7FA;">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="back-btn" @click="goBack">
          <span>‹</span>
        </div>
        <h1 class="page-title">智能评估</h1>
        <div class="header-placeholder"></div>
      </div>
    </div>

    <!-- 问题描述区域 -->
    <div class="problem-section">
      <div class="problem-card">
        <div class="problem-header">
          <h2 class="section-title">您的问题描述</h2>
          <div class="problem-actions">
            <div class="problem-type">{{ problemType }}</div>
            <button class="supplement-btn" @click="supplementQuestion">补充问题</button>
          </div>
        </div>
        <div class="problem-content">
          <p class="problem-text">{{ problemText }}</p>
          <div class="problem-tags">
            <span class="tag" v-for="tag in problemTags" :key="tag">{{ tag }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 风险评估 -->
    <div class="risk-section">
      <div class="risk-card">
        <h2 class="section-title">智能分析</h2>
        <div class="risk-level" :class="riskLevel.class">
          <div class="risk-icon">{{ riskLevel.icon }}</div>
          <div class="risk-info">
            <div class="risk-title">{{ riskLevel.title }}</div>
            <div class="risk-desc">{{ riskLevel.desc }}</div>
          </div>
        </div>
      </div>
    </div>


    <!-- 解决方案推荐 -->
    <div class="solutions-section">
      <div class="solutions-header" @click="toggleSolutionsExpanded">
        <h2 class="section-title">推荐解决方案</h2>
        <div class="expand-icon" :class="{ collapsed: !solutionsExpanded }">
          <span>▼</span>
        </div>
      </div>
      <div class="solutions-list" v-show="solutionsExpanded">
        <div 
          class="solution-card" 
          v-for="(solution, index) in solutions" 
          :key="index"
          :class="{ active: selectedSolution === index }"
          @click="selectSolution(index)"
        >
          <div class="solution-header">
            <div class="solution-title">{{ solution.title }}</div>
            <div class="solution-badge" :class="solution.badgeClass">{{ solution.badge }}</div>
          </div>
          <div class="solution-content">
            <p class="solution-desc">{{ solution.description }}</p>
            <div class="solution-stats">
              <div class="stat-item">
                <span class="stat-label">预计耗时</span>
                <span class="stat-value">{{ solution.duration }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">预计费用</span>
                <span class="stat-value">{{ solution.cost }}</span>
              </div>
            </div>
          </div>
          <div class="solution-actions">
            <button class="btn btn-primary" @click.stop="chooseSolution(index)">查看此方案</button>
          </div>
        </div>
      </div>
      
      <!-- 已选择方案展示 -->
      <div class="selected-solution" v-if="selectedSolution !== null && !solutionsExpanded">
        <div class="selected-solution-header">
          <div class="selected-solution-info">
            <div class="selected-solution-title">{{ solutions[selectedSolution].title }}</div>
            <div class="selected-solution-badge" :class="solutions[selectedSolution].badgeClass">
              {{ solutions[selectedSolution].badge }}
            </div>
          </div>
          <button class="btn btn-outline btn-small" @click="toggleSolutionsExpanded">重新选择</button>
        </div>
        <div class="selected-solution-stats">
          <div class="stat-item">
            <span class="stat-label">预计耗时</span>
            <span class="stat-value">{{ solutions[selectedSolution].duration }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">预计费用</span>
            <span class="stat-value">{{ solutions[selectedSolution].cost }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 详细流程展示 -->
    <div class="process-section" v-if="showProcess">
      <h2 class="section-title">处理流程详情</h2>
      
      
      <div class="process-timeline">
        <div 
          class="process-step" 
          v-for="(step, index) in processSteps" 
          :key="index"
          :class="{ active: index <= currentStep }"
        >
          <div class="step-number">{{ index + 1 }}</div>
          <div class="step-content">
            <div class="step-title-row">
              <div class="step-title">{{ step.title }}</div>
              <!-- 材料说明按钮 - 仅对准备起诉材料步骤显示 -->
              <button v-if="step.title === '准备起诉材料'" 
                      class="material-instruction-btn" 
                      @click="showMaterialInstructions">
                <span class="btn-icon">📋</span>
                材料说明
              </button>
            </div>
            <div class="step-desc">{{ step.description }}</div>
            <div class="step-details">
              <div class="step-time">⏱️ {{ step.duration }}</div>
              <div class="step-cost">💰 {{ step.cost }}</div>
            </div>
            <div class="step-materials" v-if="step.materials && step.materials.length > 0">
              <div class="materials-title">所需材料：</div>
              <ul class="materials-list">
                <li v-for="(material, matIndex) in step.materials" :key="matIndex" class="material-item">
                  <span class="material-text">{{ material }}</span>
                  <!-- 快速生成诉状按钮 - 仅在起诉状项右侧显示，但排除提交起诉步骤 -->
                  <button v-if="material === '起诉状' && step.title !== '提交起诉'" 
                          class="quick-generate-btn-inline" 
                          @click="quickGenerateComplaint">
                    <span class="btn-icon">⚡</span>
                    快速生成
                  </button>
                  <!-- 材料获取指导按钮 - 为其他材料项显示，但排除提交起诉步骤、协商调解模块的相关证据，以及公证的选择机构和所有提交申请步骤 -->
                  <button v-else-if="material !== '起诉状' && step.title !== '提交起诉' && !(step.title === '准备调解材料' && material === '相关证据') && step.title !== '选择公证机构' && step.title !== '提交公证申请' && step.title !== '提交申请'" 
                          class="material-guide-btn-inline" 
                          @click="showMaterialGuide(material)">
                    <span class="btn-icon">❓</span>
                    如何获取
                  </button>
                </li>
              </ul>
            </div>
            
            <!-- 网上提交流程详解 - 对劳动仲裁的提交申请和法院诉讼的提交起诉步骤显示 -->
            <div class="online-submission-guide" v-if="step.title === '提交申请' || step.title === '提交起诉'">
              <div class="guide-header" @click="toggleOnlineGuide">
                <h3 class="guide-title">🌐 网上提交流程详解</h3>
                <div class="guide-toggle" :class="{ expanded: showOnlineGuide }">
                  <span>{{ showOnlineGuide ? '▼' : '▶' }}</span>
                </div>
              </div>
              <div class="guide-content" v-show="showOnlineGuide">
                <div class="guide-steps">
                  <div class="guide-step" v-for="(guideStep, guideIndex) in onlineSubmissionSteps" :key="guideIndex">
                    <div class="guide-step-number">{{ guideIndex + 1 }}</div>
                    <div class="guide-step-content">
                      <div class="guide-step-title">{{ guideStep.title }}</div>
                      <div class="guide-step-desc">{{ guideStep.description }}</div>
                      <div class="guide-step-tips" v-if="guideStep.tips">
                        <div class="tips-title">💡 温馨提示：</div>
                        <ul class="tips-list">
                          <li v-for="(tip, tipIndex) in guideStep.tips" :key="tipIndex">{{ tip }}</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="guide-footer">
                  <button class="btn btn-primary" @click="openOnlinePortal">立即网上提交</button>
                  <button class="btn btn-outline" @click="downloadGuide">下载操作指南</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 材料获取指导弹窗 -->
    <div v-if="showGuideModal" class="guide-modal-overlay" @click="closeGuideModal">
      <div class="guide-modal" @click.stop>
        <div class="guide-header">
          <div class="guide-title-section">
            <span class="guide-icon">{{ currentGuideInfo.icon }}</span>
            <div class="guide-title-info">
              <h3>{{ currentGuideInfo.title }}</h3>
              <div class="guide-meta">
                <span class="difficulty-badge" :class="'difficulty-' + (currentGuideInfo.difficulty === '简单' ? 'easy' : currentGuideInfo.difficulty === '中等' ? 'medium' : 'hard')">
                  {{ currentGuideInfo.difficulty }}
                </span>
                <span class="time-badge">{{ currentGuideInfo.timeRequired }}</span>
              </div>
            </div>
          </div>
          <button class="guide-close-btn" @click="closeGuideModal">✕</button>
        </div>

        <div class="guide-content">
          <!-- 材料准备清单表格 - 仅对材料清单显示 -->
          <div v-if="currentGuideInfo.materialsList" class="guide-section">
            <div class="guide-overview">
              <p>{{ currentGuideInfo.description }}</p>
            </div>
            
            <div class="material-table-container">
              <table class="material-table">
                <thead>
                  <tr>
                    <th>材料类型</th>
                    <th>详细说明</th>
                    <th>份数要求</th>
                    <th>备注</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(material, index) in currentGuideInfo.materialsList" :key="index">
                    <td><strong>{{ material.type }}</strong></td>
                    <td class="description-cell">{{ material.description }}</td>
                    <td class="copies-cell"><strong>{{ material.copies }}</strong></td>
                    <td class="notes-cell">{{ material.notes }}</td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- 实用提示 -->
            <div v-if="currentGuideInfo.practicalTips && currentGuideInfo.practicalTips.length > 0" class="tips-section">
              <h4>💡 实用提示</h4>
              <ul class="tips-list">
                <li v-for="(tip, index) in currentGuideInfo.practicalTips" :key="index">{{ tip }}</li>
              </ul>
            </div>
          </div>

          <!-- 概述 - 其他类型指导 -->
          <div v-else class="guide-section">
            <div class="guide-overview">
              <p>{{ currentGuideInfo.overview }}</p>
            </div>
          </div>

          <!-- 步骤指导 - 仅对其他类型指导显示 -->
          <div v-if="!currentGuideInfo.materialsList" class="guide-section">
            <div class="guide-steps">
              <div class="steps-header">
                <h4>📋 获取步骤 ({{ guideCurrentStep + 1 }}/{{ currentGuideInfo.steps?.length || 0 }})</h4>
                <div class="step-progress">
                  <div class="progress-bar">
                    <div class="progress-fill" :style="{width: ((guideCurrentStep + 1) / (currentGuideInfo.steps?.length || 1)) * 100 + '%'}"></div>
                  </div>
                </div>
              </div>
              
              <div v-if="currentGuideInfo.steps && currentGuideInfo.steps.length > 0" class="current-step">
                <div class="step-card">
                  <div class="step-header">
                    <span class="step-number">{{ guideCurrentStep + 1 }}</span>
                    <h5>{{ currentGuideInfo.steps[guideCurrentStep].title }}</h5>
                    <div class="step-meta">
                      <span class="step-time">⏱️ {{ currentGuideInfo.steps[guideCurrentStep].timeNeeded }}</span>
                    </div>
                  </div>
                  <div class="step-content">
                    <p class="step-description">{{ currentGuideInfo.steps[guideCurrentStep].description }}</p>
                    
                    <div v-if="currentGuideInfo.steps[guideCurrentStep].tips" class="step-tips">
                      <h6>💡 操作提示：</h6>
                      <ul>
                        <li v-for="(tip, index) in currentGuideInfo.steps[guideCurrentStep].tips" :key="index">{{ tip }}</li>
                      </ul>
                    </div>

                    <div v-if="currentGuideInfo.steps[guideCurrentStep].alternatives" class="step-alternatives">
                      <h6>🔄 备选方案：</h6>
                      <div class="alternatives-list">
                        <span v-for="(alt, index) in currentGuideInfo.steps[guideCurrentStep].alternatives" :key="index" class="alternative-tag">{{ alt }}</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="step-navigation">
                  <button class="nav-btn" :disabled="guideCurrentStep === 0" @click="prevGuideStep">
                    ← 上一步
                  </button>
                  <button class="nav-btn primary" :disabled="guideCurrentStep >= (currentGuideInfo.steps?.length || 1) - 1" @click="nextGuideStep">
                    下一步 →
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 快捷操作 -->
          <div v-if="currentGuideInfo.quickActions && currentGuideInfo.quickActions.length > 0" class="guide-section">
            <h4>⚡ 快捷操作</h4>
            <div class="quick-actions">
              <div v-for="(action, index) in currentGuideInfo.quickActions" :key="index" class="quick-action-card" @click="executeQuickAction(action.action, currentMaterial)">
                <span class="action-icon">{{ action.icon }}</span>
                <div class="action-info">
                  <h5>{{ action.title }}</h5>
                  <p>{{ action.description }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 替代方案 -->
          <div v-if="currentGuideInfo.alternatives" class="guide-section">
            <h4>🔄 {{ currentGuideInfo.alternatives.title }}</h4>
            <div class="alternatives-grid">
              <div v-for="(item, index) in currentGuideInfo.alternatives.items" :key="index" class="alternative-item">
                {{ item }}
              </div>
            </div>
          </div>

          <!-- 常见问题 -->
          <div v-if="currentGuideInfo.faqs && currentGuideInfo.faqs.length > 0" class="guide-section">
            <h4>❓ 常见问题</h4>
            <div class="faqs">
              <div v-for="(faq, index) in currentGuideInfo.faqs" :key="index" class="faq-item">
                <div class="faq-question">{{ faq.question }}</div>
                <div class="faq-answer">{{ faq.answer }}</div>
              </div>
            </div>
          </div>

          <!-- 法律依据 -->
          <div v-if="currentGuideInfo.legalBasis" class="guide-section">
            <h4>⚖️ 法律依据</h4>
            <div class="legal-basis">
              {{ currentGuideInfo.legalBasis }}
            </div>
          </div>

          <!-- 相关材料 -->
          <div v-if="currentGuideInfo.relatedMaterials && currentGuideInfo.relatedMaterials.length > 0" class="guide-section">
            <h4>🔗 相关材料</h4>
            <div class="related-materials">
              <span v-for="(material, index) in currentGuideInfo.relatedMaterials" :key="index" class="related-material-tag" @click="showMaterialGuide(material)">
                {{ material }}
              </span>
            </div>
          </div>
        </div>

        <div class="guide-footer">
          <button class="footer-btn outline" @click="bookmarkGuide">
            ⭐ 收藏指导
          </button>
          <button class="footer-btn primary" @click="closeGuideModal">
            知道了
          </button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import routerManager from '../../utils/router.js'

// 为普通 Vue 项目创建 uni 对象模拟
if (typeof uni === 'undefined') {
  window.uni = {
    navigateTo(options) {
      console.log('模拟 uni.navigateTo:', options)
      if (options.url) {
        // 使用 Vue Router 风格的导航
        const hash = options.url.replace(/^\/pages/, '#/pages')
        
        try {
          window.location.hash = hash
          
          setTimeout(() => {
            if (options.success) {
              options.success({ errMsg: 'navigateTo:ok' })
            }
          }, 100)
        } catch (error) {
          if (options.fail) {
            options.fail({ errMsg: 'navigateTo:fail' })
          }
        }
      }
    },
    navigateBack(options = {}) {
      try {
        window.history.back()
        setTimeout(() => {
          if (options.success) {
            options.success({ errMsg: 'navigateBack:ok' })
          }
        }, 100)
      } catch (error) {
        if (options.fail) {
          options.fail({ errMsg: 'navigateBack:fail' })
        }
      }
    },
    showToast(options) {
      console.log('模拟 uni.showToast:', options)
      // 创建自定义toast而不是用alert
      const toast = document.createElement('div')
      toast.textContent = options.title || '提示'
      toast.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0,0,0,0.8);
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        z-index: 9999;
        font-size: 14px;
      `
      document.body.appendChild(toast)
      setTimeout(() => {
        if (document.body.contains(toast)) {
          document.body.removeChild(toast)
        }
      }, options.duration || 2000)
    },
    showLoading(options) {
      console.log('模拟 uni.showLoading:', options?.title || 'Loading...')
    },
    hideLoading() {
      console.log('模拟 uni.hideLoading')
    },
    showModal(options) {
      console.log('模拟 uni.showModal:', options)
      const result = confirm(options.content || '确认操作？')
      if (options.success) {
        options.success({
          confirm: result,
          cancel: !result,
          content: result ? (options.placeholderText || '') : ''
        })
      }
    },
    showActionSheet(options) {
      console.log('模拟 uni.showActionSheet:', options)
      if (options.itemList && options.itemList.length > 0) {
        const choice = prompt('请选择：\n' + options.itemList.map((item, index) => `${index}: ${item}`).join('\n'), '0')
        const tapIndex = parseInt(choice)
        if (!isNaN(tapIndex) && tapIndex >= 0 && tapIndex < options.itemList.length) {
          if (options.success) {
            options.success({ tapIndex })
          }
        }
      }
    }
  }
}

export default {
  name: 'SmartEvaluation',
  created() {
    console.log('🚀 SmartEvaluation 组件创建')
    console.log('📍 创建时间:', new Date().toISOString())
    console.log('🌐 当前URL:', window.location?.href || 'N/A')
  },
  mounted() {
    console.log('🎯 SmartEvaluation 组件挂载完成')
    console.log('📊 当前数据:', this.$data)
    console.log('🎨 DOM元素数量:', document.querySelectorAll('.container').length)
    console.log('🔍 页面可见性:', document.visibilityState)
    
    // 检查关键DOM元素
    const container = document.querySelector('.container')
    if (container) {
      console.log('✅ 容器元素存在')
      console.log('📐 容器尺寸:', {
        width: container.offsetWidth,
        height: container.offsetHeight,
        style: window.getComputedStyle(container).display
      })
    } else {
      console.error('❌ 容器元素不存在')
    }
    
    // 检查CSS变量
    const rootStyle = window.getComputedStyle(document.documentElement)
    console.log('🎨 CSS变量检查:', {
      primaryColor: rootStyle.getPropertyValue('--primary-color'),
      backgroundColor: rootStyle.getPropertyValue('--background-color')
    })
  },
  data() {
    console.log('📝 SmartEvaluation data() 初始化')
    return {
      problemText: '',
      problemType: '劳动纠纷',
      problemTags: [],
        riskLevel: {
          class: 'medium',
          icon: '',
          title: '',
          desc: '1. 首先尝试调解解决（成本低、时间短）\n2. 如调解不满意，可申请仲裁（程序相对简单）\n3. 如仲裁不满意，最后可通过法院起诉（具有强制执行力）'
        },
      selectedSolution: null,
      showProcess: false,
      currentStep: 0,
      solutionsExpanded: true,
      showOnlineGuide: false,
      arbitrationOnlineSteps: [
        {
          title: '登录官方网站',
          description: '访问劳动仲裁委员会官网，使用身份证号或手机号登录',
          tips: [
            '首次使用需注册并实名认证',
            '建议使用Chrome或Edge浏览器',
            '忘记密码可通过手机验证码重置'
          ]
        },
        {
          title: '填写申请信息',
          description: '在线填写仲裁申请书，包括申请人、被申请人、争议事实等',
          tips: [
            '信息必须真实准确，虚假信息影响案件处理',
            '争议事实描述要简洁明了，突出重点',
            '可参考网站提供的申请书模板'
          ]
        },
        {
          title: '上传证据材料',
          description: '上传相关证据材料电子版（PDF、JPG格式）',
          tips: [
            '文件大小不超过10MB，格式为PDF或JPG',
            '材料要清晰完整，避免模糊不清',
            '建议按时间顺序整理材料'
          ]
        },
        {
          title: '确认提交',
          description: '核对信息无误后，点击提交按钮完成申请',
          tips: [
            '提交后无法修改，请仔细核对',
            '系统生成申请编号，请妥善保存',
            '提交成功后会收到短信通知'
          ]
        },
        {
          title: '等待审查',
          description: '仲裁委员会5-7个工作日内审查材料并决定是否立案',
          tips: [
            '可通过申请编号在线查询案件进度',
            '需补充材料会通过短信或电话通知',
            '立案成功后会收到开庭通知书'
          ]
        }
      ],
      courtOnlineSteps: [
        {
          title: '登录法院官网',
          description: '访问人民法院诉讼服务网，使用身份证号注册登录',
          tips: [
            '首次使用需完成实名认证',
            '支持手机号、身份证号登录',
            '建议使用主流浏览器，避免兼容性问题'
          ]
        },
        {
          title: '选择起诉类型',
          description: '根据案件性质选择相应的起诉类型（如劳动争议、合同纠纷等）',
          tips: [
            '仔细阅读各类型说明，确保选择正确',
            '不确定可先咨询在线客服',
            '不同类型对应不同的材料要求'
          ]
        },
        {
          title: '填写起诉状',
          description: '在线填写电子起诉状，包括当事人信息、诉讼请求、事实理由等',
          tips: [
            '当事人信息必须与身份证一致',
            '诉讼请求要明确具体，便于法院审理',
            '事实理由要客观真实，逻辑清晰',
            '可使用系统提供的模板进行填写'
          ]
        },
        {
          title: '上传证据材料',
          description: '上传起诉状、身份证明、证据材料等电子版文件',
          tips: [
            '文件格式支持PDF、JPG、PNG',
            '单个文件大小不超过20MB',
            '证据材料要清晰完整，按类别分组上传',
            '重要证据建议先做公证'
          ]
        },
        {
          title: '缴纳诉讼费',
          description: '根据系统计算的诉讼费金额，在线缴费或选择现场缴费',
          tips: [
            '支持微信、支付宝、银行卡在线支付',
            '诉讼费根据争议金额按比例计算',
            '缴费成功后保存电子收据',
            '符合条件的可申请诉讼费减免'
          ]
        },
        {
          title: '提交立案申请',
          description: '确认所有信息无误后，正式提交立案申请',
          tips: [
            '提交前仔细核对所有信息',
            '提交后获得案件受理号码',
            '系统自动推送受理通知到手机',
            '可随时在线查询案件进度'
          ]
        },
        {
          title: '等待法院审查',
          description: '法院7个工作日内审查材料，决定是否立案',
          tips: [
            '可通过受理号码查询审查进度',
            '材料不符合要求会通知补正',
            '立案成功后会收到开庭传票',
            '保持手机畅通，及时接收通知'
          ]
        }
      ],
      solutions: [
        {
          title: '劳动仲裁',
          badge: '推荐',
          badgeClass: 'recommended',
          description: '通过劳动仲裁委员会解决争议，程序相对简单，成本较低',
          duration: '15-30天',
          cost: '¥0',
          processSteps: [
            {
              title: '准备材料',
              description: '收集相关证据材料，准备仲裁申请书',
              duration: '1-3天',
              cost: '¥0',
              materials: [
                '劳动合同',
                '工资条/银行流水',
                '工作证明',
                '仲裁申请书'
              ]
            },
            {
              title: '提交申请',
              description: '向劳动仲裁委员会提交仲裁申请',
              duration: '1天',
              cost: '¥0',
              materials: [
                '仲裁申请书',
                '身份证明',
                '证据材料'
              ]
            },
            {
              title: '立案审查',
              description: '仲裁委员会审查材料，决定是否立案',
              duration: '5-7天',
              cost: '¥0',
              materials: []
            },
            {
              title: '开庭审理',
              description: '仲裁庭组织双方开庭审理',
              duration: '1-2天',
              cost: '¥0',
              materials: []
            },
            {
              title: '裁决执行',
              description: '仲裁委员会作出裁决，双方执行',
              duration: '10-15天',
              cost: '¥0',
              materials: []
            }
          ]
        },
        {
          title: '公证确认',
          badge: '公证',
          badgeClass: 'notary',
          description: '通过公证处对相关事实、文件进行公证，具有较强的法律效力和证明力',
          duration: '5-15天',
          cost: '¥100-500',
          processSteps: [
            {
              title: '准备公证材料',
              description: '收集需要公证的相关证据和文件',
              duration: '1-2天',
              cost: '¥0',
              materials: [
                '身份证明',
                '相关证据文件',
                '公证申请书'
              ]
            },
            {
              title: '选择公证机构',
              description: '选择有资质的公证处并预约办理',
              duration: '1天',
              cost: '¥0',
              materials: [
                '公证处资质证明',
                '预约凭证'
              ]
            },
            {
              title: '提交公证申请',
              description: '向公证处提交申请并缴费',
              duration: '1天',
              cost: '¥100-300',
              materials: [
                '公证申请书',
                '相关材料',
                '身份证明'
              ]
            },
            {
              title: '公证员审核',
              description: '公证员审核材料并进行调查核实',
              duration: '3-7天',
              cost: '¥0',
              materials: []
            },
            {
              title: '出具公证书',
              description: '公证处出具正式公证书',
              duration: '1-3天',
              cost: '¥100-200',
              materials: []
            }
          ]
        },
        {
          title: '法院诉讼',
          badge: '备选',
          badgeClass: 'alternative',
          description: '直接向法院起诉，程序复杂但具有强制执行力',
          duration: '3-6个月',
          cost: '¥50-300',
          processSteps: [
            {
              title: '准备起诉材料',
              description: '准备起诉状和相关证据材料',
              duration: '3-5天',
              cost: '¥0',
              materials: [
                '起诉状',
                '证据材料',
                '身份证明',
                '授权委托书'
              ]
            },
            {
              title: '提交起诉',
              description: '向有管辖权的法院提交起诉状',
              duration: '1天',
              cost: '¥50-300',
              materials: [
                '起诉状',
                '证据材料'
              ]
            },
            {
              title: '法院立案',
              description: '法院审查材料，决定是否立案',
              duration: '7-15天',
              cost: '¥0',
              materials: []
            },
            {
              title: '庭前准备',
              description: '法院组织庭前会议，交换证据',
              duration: '15-30天',
              cost: '¥0',
              materials: []
            },
            {
              title: '开庭审理',
              description: '法院开庭审理案件',
              duration: '1-3天',
              cost: '¥0',
              materials: []
            },
            {
              title: '判决执行',
              description: '法院作出判决，执行判决结果',
              duration: '30-60天',
              cost: '¥0',
              materials: []
            }
          ]
        },
        {
          title: '协商调解',
          badge: '快速',
          badgeClass: 'fast',
          description: '通过律师或调解员协助协商，快速解决争议',
          duration: '3-7天',
          cost: '¥100-500',
          processSteps: [
            {
              title: '准备调解材料',
              description: '整理相关证据材料，准备调解方案',
              duration: '1-2天',
              cost: '¥0',
              materials: [
                '相关证据',
                '身份证明'
              ]
            },
            {
              title: '调解会议',
              description: '双方在调解员主持下进行协商',
              duration: '1-2天',
              cost: '¥100-500',
              materials: []
            },
            {
              title: '达成协议',
              description: '双方达成调解协议，签署调解书',
              duration: '1天',
              cost: '¥0',
              materials: []
            }
          ]
        }
      ],
      processSteps: [],
      // 材料获取指导相关数据
      showGuideModal: false,
      currentMaterial: '',
      currentGuideInfo: {},
      guideCurrentStep: 0,
      guideViewHistory: [], // 用户查看指导的历史记录
      guideBookmarks: [], // 用户收藏的指导
      showGuideVideo: false, // 是否显示视频指导
      currentGuideVideo: ''
    }
  },
  computed: {
    totalDuration() {
      if (this.selectedSolution !== null) {
        return this.solutions[this.selectedSolution].duration
      }
      return '15-30天'
    },
    totalCost() {
      if (this.selectedSolution !== null) {
        return this.solutions[this.selectedSolution].cost
      }
      return '¥0-500'
    },
    onlineSubmissionSteps() {
      if (this.selectedSolution !== null) {
        const solutionTitle = this.solutions[this.selectedSolution].title
        if (solutionTitle === '法院诉讼') {
          return this.courtOnlineSteps
        } else if (solutionTitle === '劳动仲裁') {
          return this.arbitrationOnlineSteps
        }
      }
      // 默认返回劳动仲裁的步骤
      return this.arbitrationOnlineSteps
    },
  },
  created() {
    console.log('🎬 智能评估页面组件创建')
    console.log('组件创建时间戳:', new Date().toISOString())
    console.log('Vue实例初始化完成')
  },
  mounted() {
    console.log('🚀 智能评估页面开始加载')
    console.log('页面加载时间戳:', new Date().toISOString())
    console.log('当前页面URL:', window.location?.href || 'N/A')
    console.log('页面路径:', window.location?.pathname || 'N/A')
    
    // 从本地存储获取问题描述
    try {
      const storedProblemText = localStorage.getItem('problemText')
      const evaluationTimestamp = localStorage.getItem('evaluationTimestamp')
      
      console.log('📋 从本地存储获取数据:')
      console.log('- 问题文本:', storedProblemText || '无')
      console.log('- 评估时间戳:', evaluationTimestamp || '无')
      
      this.problemText = storedProblemText || '公司拖欠工资3个月，要求支付工资和经济补偿金'
      
      if (storedProblemText) {
        console.log('✓ 成功获取用户输入的问题文本')
      } else {
        console.log('⚠️ 未找到用户输入，使用默认问题文本')
      }
      
    } catch (e) {
      console.error('✗ 获取本地存储数据失败:', e)
      this.problemText = '公司拖欠工资3个月，要求支付工资和经济补偿金'
    }
    
    console.log('📊 开始分析问题...')
    this.analyzeProblem()
    console.log('✅ 智能评估页面加载完成')
  },
  methods: {
    goBack() {
      window.history.pushState({}, '', '/')
      window.dispatchEvent(new PopStateEvent('popstate'))
    },
    analyzeProblem() {
      // 模拟AI分析过程
      console.log('分析问题:', this.problemText)
    },
    selectSolution(index) {
      this.selectedSolution = index
    },
    chooseSolution(index) {
      this.selectedSolution = index
      this.solutionsExpanded = false
      this.showProcess = true
      this.loadProcessSteps(index)
      // 已选择方案，无需弹窗提示
    },
    toggleSolutionsExpanded() {
      this.solutionsExpanded = !this.solutionsExpanded
    },
    loadProcessSteps(solutionIndex) {
      if (this.solutions[solutionIndex] && this.solutions[solutionIndex].processSteps) {
        this.processSteps = this.solutions[solutionIndex].processSteps
      }
    },
    quickGenerateComplaint() {
      // 跳转到快速生成诉状页面
      routerManager.navigateTo('/pages/complaint-generator/index', {
        success: (res) => {
          console.log('跳转到诉状生成页面成功')
        },
        fail: (err) => {
          console.error('跳转失败:', err)
          alert('页面跳转失败')
        }
      })
    },
    showMaterialGuide(material) {
      // 显示材料获取指导 - 使用完善的指导界面
      this.currentMaterial = material
      this.currentGuideInfo = this.getMaterialGuideInfo(material)
      this.showGuideModal = true
      
      // 记录用户查看指导的行为
      this.trackGuideView(material)
    },
    showMaterialInstructions() {
      // 显示准备起诉材料的详细说明
      this.currentMaterial = '准备起诉材料说明'
      this.currentGuideInfo = this.getMaterialInstructionsInfo()
      this.showGuideModal = true
    },
    getMaterialInstructionsInfo() {
      return {
        icon: '📋',
        title: '起诉材料准备清单',
        difficulty: '重要',
        timeRequired: '1-2周',
        description: '民事诉讼起诉材料是立案的基础，请按照以下清单准备齐全。',
        materialsList: [
          {
            type: '起诉状',
            description: '写明原被告信息、诉讼请求、事实与理由',
            copies: '被告人数 + 1份（例如1个被告需2份）',
            notes: '原告需签名/捺印或盖章'
          },
          {
            type: '原告身份证明',
            description: '自然人：身份证复印件\n法人：营业执照复印件、法定代表人身份证明、身份证复印件',
            copies: '1份',
            notes: '现场立案需核对原件'
          },
          {
            type: '被告身份信息',
            description: '自然人：清晰明确的姓名、住所等信息\n法人：工商登记信息',
            copies: '1份',
            notes: '信息需足以识别被告身份'
          },
          {
            type: '委托代理手续',
            description: '授权委托书\n律师还需律所函、律师证复印件',
            copies: '1份',
            notes: '近亲属代理需关系证明'
          },
          {
            type: '证据材料',
            description: '与案件事实相关的证据复印件',
            copies: '被告人数 + 1份（例如1个被告需2份）',
            notes: '立案时通常只需复印件，开庭需带原件核对'
          },
          {
            type: '送达地址确认书',
            description: '提供准确的送达地址',
            copies: '1份',
            notes: '法院提供模板，现场填写'
          }
        ],
        practicalTips: [
          '建议提前1-2周准备材料，确保内容准确、格式规范',
          '准备多份复印件备用',
          '重要证据建议先做公证',
          '不确定的材料可先咨询法院立案庭'
        ],
        relatedMaterials: []
      }
    },
    getMaterialGuideInfo(material) {
      const guides = {
        '劳动合同': {
          icon: '📋',
          title: '劳动合同获取指导',
          difficulty: '中等',
          timeRequired: '3-7天',
          overview: '劳动合同是证明劳动关系的核心证据，获取相对容易但需要一定技巧',
          steps: [
            {
              title: '直接向公司索取',
              description: '向公司人事部门或直接主管申请获取合同副本',
              tips: [
                '可以书面形式申请，保留申请记录',
                '说明用于个人留存，避免引起不必要的猜疑',
                '如果是电子合同，要求提供加盖公章的打印版'
              ],
              timeNeeded: '1-3天',
              alternatives: ['通过同事代为申请', '联系HR部门负责人']
            },
            {
              title: '劳动监察部门投诉',
              description: '如公司拒绝提供，可向劳动监察部门投诉',
              tips: [
                '携带身份证、工作证明等材料',
                '详细说明公司拒绝提供合同的情况',
                '要求监察部门督促公司履行义务'
              ],
              timeNeeded: '5-10天',
              alternatives: ['向工会求助', '咨询法律援助中心']
            },
            {
              title: '申请调取备案合同',
              description: '部分地区要求企业在劳动部门备案合同',
              tips: [
                '了解当地是否有合同备案制度',
                '向劳动保障部门申请调取',
                '需要提供身份证明和劳动关系证明'
              ],
              timeNeeded: '7-15天',
              alternatives: ['查询社保缴费记录', '申请工资发放记录']
            }
          ],
          alternatives: {
            title: '无合同情况下的替代证据',
            items: [
              '工作证、工牌、名片等身份证明',
              '工资条、银行流水等工资支付证明',
              '社保缴费记录、公积金缴费记录',
              '同事证人证言（需提供联系方式）',
              '工作邮件、微信群聊记录',
              '考勤记录、请假条等工作记录'
            ]
          },
          faqs: [
            {
              question: '公司说合同丢了怎么办？',
              answer: '公司有义务保管劳动合同，如确实丢失应重新签订。可要求公司出具书面说明，并向劳动监察部门举报。'
            },
            {
              question: '试用期没签合同能要求补签吗？',
              answer: '可以。根据劳动合同法，用人单位应在用工之日起一个月内签订书面合同，试用期也不例外。'
            },
            {
              question: '电子合同有法律效力吗？',
              answer: '有效。但建议要求公司提供加盖公章的纸质版本，作为重要证据保存。'
            }
          ],
          legalBasis: '《劳动合同法》第16条、第81条；《劳动保障监察条例》第30条',
          relatedMaterials: ['工作证明', '工资条/银行流水', '身份证明'],
          hasQuickAction: false
        },
        '工资条/银行流水': {
          icon: '💰',
          title: '工资流水获取指导',
          difficulty: '简单',
          timeRequired: '1-3天',
          overview: '工资条和银行流水是证明工资标准和支付情况的重要证据，获取相对容易',
          steps: [
            {
              title: '获取工资条',
              description: '向公司财务或人事部门索取工资条',
              tips: [
                '要求提供近6-12个月的工资条',
                '确保工资条包含基本工资、加班费、扣款等明细',
                '如是电子工资条，要求发送到个人邮箱'
              ],
              timeNeeded: '1天',
              alternatives: ['查看工资短信通知', '登录公司OA系统下载']
            },
            {
              title: '打印银行流水',
              description: '到银行网点或通过网银打印工资流水',
              tips: [
                '携带身份证和银行卡到柜台办理',
                '可指定打印工资收入相关的流水',
                '建议打印近6个月的完整流水'
              ],
              timeNeeded: '半天',
              alternatives: ['手机银行APP截图', '网上银行打印']
            },
            {
              title: '第三方支付流水',
              description: '导出支付宝、微信等第三方支付的工资记录',
              tips: [
                '在支付宝中搜索"流水证明"',
                '微信中通过"钱包-账单"导出明细',
                '确保包含完整的收入记录'
              ],
              timeNeeded: '10分钟',
              alternatives: ['截图保存转账记录', '导出PDF格式账单']
            }
          ],
          quickActions: [
            {
              title: '手机银行快速查询',
              description: '使用手机银行APP快速查询并截图保存',
              action: 'bank',
              icon: '📱'
            },
            {
              title: '支付宝流水证明',
              description: '在支付宝中搜索"流水证明"快速生成',
              action: 'alipay',
              icon: '💙'
            }
          ],
          faqs: [
            {
              question: '银行流水可以只打印工资部分吗？',
              answer: '可以。在银行柜台办理时，可以要求只打印工资收入相关的流水，这样更有针对性。'
            },
            {
              question: '电子工资条有效吗？',
              answer: '有效。但建议同时保存纸质版本和电子版本，确保证据的完整性。'
            },
            {
              question: '工资是现金发放怎么证明？',
              answer: '可以要求公司出具工资发放证明，或者通过工资条、考勤记录等间接证明。'
            }
          ],
          legalBasis: '《工资支付暂行规定》第6条；《劳动法》第50条',
          relatedMaterials: ['劳动合同', '工作证明', '考勤记录'],
          hasQuickAction: true
        },
        '工作证明': {
          icon: '🏢',
          title: '工作证明获取指导',
          difficulty: '中等',
          timeRequired: '2-5天',
          overview: '工作证明用于证明劳动关系的存在，需要收集多种类型的证据相互印证',
          steps: [
            {
              title: '收集实物证据',
              description: '收集能证明在公司工作的实物证据',
              tips: [
                '工作证、工牌、门禁卡等身份标识',
                '工作服、工作帽等统一服装',
                '名片、工作邮箱、企业邮箱等',
                '公司内部通讯录、组织架构图'
              ],
              timeNeeded: '1天',
              alternatives: ['拍照记录工作场所', '保存工作相关物品']
            },
            {
              title: '获取证人证言',
              description: '联系同事提供证人证言',
              tips: [
                '选择关系较好且愿意配合的同事',
                '要求提供书面证言并签字',
                '证言应包含具体的工作内容和时间',
                '保留证人的联系方式和身份信息'
              ],
              timeNeeded: '2-3天',
              alternatives: ['录音证言', '微信聊天记录作证']
            },
            {
              title: '保存工作记录',
              description: '收集日常工作中产生的各种记录',
              tips: [
                '工作邮件、内部通知、会议记录',
                '项目文档、工作报告、业绩记录',
                '出差申请、报销单据、请假条',
                '培训记录、考核记录等'
              ],
              timeNeeded: '1-2天',
              alternatives: ['截图保存电子记录', '复印纸质文件']
            }
          ],
          alternatives: {
            title: '其他可用的工作证明',
            items: [
              '社保缴费记录（最有力的证据）',
              '个税缴纳记录',
              '公积金缴费记录',
              '工资银行流水',
              '考勤打卡记录',
              '客户合同中的经办人签名',
              '公司官网员工介绍页面截图',
              '参加公司活动的照片或视频'
            ]
          },
          faqs: [
            {
              question: '同事不愿意作证怎么办？',
              answer: '可以理解同事的顾虑。可以寻找其他证据，如社保记录、工资流水等，这些通常更有说服力。'
            },
            {
              question: '工作微信群聊记录有用吗？',
              answer: '非常有用。工作群的聊天记录可以证明工作内容和同事关系，建议截图保存关键对话。'
            },
            {
              question: '试用期的工作证明如何收集？',
              answer: '试用期同样需要证明劳动关系。可以收集入职通知、试用期考核记录、工资支付证明等。'
            }
          ],
          legalBasis: '《劳动争议调解仲裁法》第6条；《民事诉讼法》关于证据的规定',
          relatedMaterials: ['劳动合同', '工资条/银行流水', '社保记录'],
          hasQuickAction: false
        },
        '身份证明': {
          icon: '🆔',
          title: '身份证明获取指导',
          difficulty: '简单',
          timeRequired: '1天',
          overview: '身份证明是最基础的材料，获取简单但要注意有效期和清晰度',
          steps: [
            {
              title: '准备身份证原件',
              description: '确保身份证在有效期内且清晰可读',
              tips: [
                '检查身份证是否过期或即将过期',
                '确保身份证没有破损或磨损严重',
                '如有破损，及时到派出所换领新证'
              ],
              timeNeeded: '立即',
              alternatives: ['临时身份证', '户口本']
            },
            {
              title: '制作清晰复印件',
              description: '复印身份证正反面，确保信息清晰',
              tips: [
                '使用高质量复印机，确保字迹清晰',
                '正反面复印在同一张纸上',
                '建议准备3-5份复印件备用',
                '可在复印件上注明"仅用于劳动仲裁"'
              ],
              timeNeeded: '10分钟',
              alternatives: ['高清拍照', '扫描成电子版']
            }
          ],
          quickActions: [
            {
              title: '电子身份证',
              description: '使用支付宝、微信等获取电子身份证',
              action: 'e-id',
              icon: '📱'
            },
            {
              title: '临时身份证办理',
              description: '身份证丢失或损坏时的应急方案',
              action: 'temp-id',
              icon: '⏰'
            }
          ],
          alternatives: {
            title: '其他可用的身份证明',
            items: [
              '户口本（户主页和本人页）',
              '护照（有效期内）',
              '军官证、士兵证（现役军人）',
              '港澳通行证、台胞证',
              '外国人居留证（外籍人员）',
              '临时身份证（有效期内）'
            ]
          },
          faqs: [
            {
              question: '身份证丢失了怎么办？',
              answer: '立即到派出所挂失并办理临时身份证，临时身份证同样具有法律效力，可用于仲裁申请。'
            },
            {
              question: '电子身份证可以用吗？',
              answer: '部分地区和机构认可电子身份证，但建议同时准备纸质证件，确保万无一失。'
            },
            {
              question: '身份证快过期了需要换新吗？',
              answer: '建议及时换领新证。如果来不及，可以在复印件上注明换证情况，一般不影响使用。'
            }
          ],
          legalBasis: '《居民身份证法》；《劳动争议调解仲裁法》第28条',
          relatedMaterials: ['户口本', '护照', '临时身份证'],
          hasQuickAction: true
        },
        '仲裁申请书': {
          icon: '📝',
          title: '仲裁申请书获取指导',
          difficulty: '中等',
          timeRequired: '1-2天',
          overview: '仲裁申请书是启动仲裁程序的关键文件，可以下载模板或智能生成',
          steps: [
            {
              title: '官网下载模板',
              description: '从劳动仲裁委员会官网下载标准模板',
              tips: [
                '访问当地劳动仲裁委员会官方网站',
                '查找"表格下载"或"办事指南"栏目',
                '下载最新版本的申请书模板',
                '注意不同地区模板可能略有差异'
              ],
              timeNeeded: '30分钟',
              alternatives: ['电话咨询获取下载链接', '现场索取纸质模板']
            },
            {
              title: '现场领取表格',
              description: '到仲裁委员会现场领取空白申请书',
              tips: [
                '携带身份证到仲裁委员会服务大厅',
                '向工作人员说明需要申请书表格',
                '可同时咨询填写注意事项',
                '领取填写说明和相关资料'
              ],
              timeNeeded: '半天',
              alternatives: ['委托他人代为领取', '电话预约上门服务']
            },
            {
              title: '智能生成申请书',
              description: '使用智诉小程序智能生成个性化申请书',
              tips: [
                '根据案件情况智能匹配模板',
                '自动填充基本信息和争议事实',
                '提供法条引用和格式检查',
                '支持多次修改和完善'
              ],
              timeNeeded: '15分钟',
              alternatives: ['咨询律师代为起草', '参考类似案例模板']
            }
          ],
          quickActions: [
            {
              title: '智能生成申请书',
              description: '使用智诉小程序快速生成专业申请书',
              action: 'generate',
              icon: '🤖'
            },
            {
              title: '官网模板下载',
              description: '跳转到劳动仲裁委员会官网下载',
              action: 'download',
              icon: '📥'
            }
          ],
          fillGuide: {
            title: '申请书填写要点',
            sections: [
              {
                title: '申请人信息',
                items: ['姓名、性别、年龄、身份证号', '联系电话、通讯地址', '工作单位、职务']
              },
              {
                title: '被申请人信息',
                items: ['公司全称、法定代表人', '注册地址、联系电话', '统一社会信用代码']
              },
              {
                title: '仲裁请求',
                items: ['具体的诉求内容', '要求赔偿的金额', '其他相关请求']
              },
              {
                title: '事实和理由',
                items: ['争议发生的时间、地点', '具体的争议事实', '法律依据和理由']
              }
            ]
          },
          faqs: [
            {
              question: '申请书可以手写吗？',
              answer: '可以手写，但建议打印。手写要求字迹工整清晰，使用黑色或蓝色墨水笔。'
            },
            {
              question: '申请书写错了怎么办？',
              answer: '可以重新填写或在错误处更正并签字确认。重要错误建议重新填写一份。'
            },
            {
              question: '需要几份申请书？',
              answer: '一般需要准备3份：仲裁委员会1份，被申请人1份，自己保留1份。具体以当地要求为准。'
            }
          ],
          legalBasis: '《劳动争议调解仲裁法》第28条；各地仲裁委员会程序规定',
          relatedMaterials: ['身份证明', '劳动合同', '证据材料'],
          hasQuickAction: true
        }
      }
      
      return guides[material] || {
        icon: '📌',
        title: '材料获取指导',
        difficulty: '中等',
        timeRequired: '1-3天',
        overview: '暂未收录该材料的详细获取指导',
        steps: [
          {
            title: '咨询相关部门',
            description: '向相关部门工作人员咨询获取方式',
            tips: ['准备相关身份证明', '说明用途和需求', '了解具体流程和要求'],
            timeNeeded: '1天',
          }
        ],
        alternatives: {
          title: '其他建议',
          items: [
            '联系专业律师获得帮助',
            '查阅相关法律法规',
            '咨询法律援助中心',
            '向工会寻求帮助'
          ]
        },
        faqs: [
          {
            question: '如何确定需要哪些材料？',
            answer: '建议咨询劳动仲裁委员会或专业律师，根据具体案件情况确定所需材料清单。'
          }
        ],
        hasQuickAction: false
      }
    },
    handleMaterialAction(material, action) {
      // 处理材料获取的快捷操作
      this.executeQuickAction(action, material)
    },
    executeQuickAction(action, material) {
      switch(action) {
        case 'bank':
          this.showBankGuide()
          break
        case 'alipay':
          this.showAlipayGuide()
          break
        case 'e-id':
          this.showElectronicIdGuide()
          break
        case 'temp-id':
          this.showTempIdGuide()
          break
        case 'generate':
          this.generateApplication()
          break
        case 'download':
          this.downloadTemplate()
          break
        default:
          uni.showToast({
            title: '功能开发中',
            icon: 'none'
          })
      }
    },
    showBankGuide() {
      uni.showActionSheet({
        itemList: ['手机银行APP', '网上银行', '银行网点办理', 'ATM机打印'],
        success: (res) => {
          const guides = [
            '📱 手机银行APP：\n1. 打开银行APP并登录\n2. 找到"查询"或"明细"功能\n3. 选择时间范围（建议6个月）\n4. 截图保存或导出PDF',
            '💻 网上银行：\n1. 登录银行官方网站\n2. 进入个人网银\n3. 选择"账户查询-交易明细"\n4. 打印或下载电子版',
            '🏦 银行网点：\n1. 携带身份证和银行卡\n2. 到柜台说明需要打印流水\n3. 指定时间范围和账户\n4. 加盖银行公章',
            '🏧 ATM机：\n1. 插入银行卡输入密码\n2. 选择"查询服务-明细查询"\n3. 选择打印功能\n4. 注意ATM机纸张充足'
          ]
          
          uni.showModal({
            title: '银行流水获取指导',
            content: guides[res.tapIndex],
            confirmText: '知道了',
            showCancel: false
          })
        }
      })
    },
    showAlipayGuide() {
      uni.showModal({
        title: '支付宝流水证明',
        content: '📱 操作步骤：\n\n1. 打开支付宝APP\n2. 搜索"流水证明"\n3. 选择"收入流水证明"\n4. 选择时间范围\n5. 生成并下载PDF\n\n💡 提示：支付宝流水证明具有法律效力，可直接用于仲裁',
        confirmText: '打开支付宝',
        cancelText: '稍后再说',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '请在手机中打开支付宝',
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
    },
    showElectronicIdGuide() {
      uni.showActionSheet({
        itemList: ['支付宝电子身份证', '微信身份证网证', '公安部互联网+'],
        success: (res) => {
          const guides = [
            '💙 支付宝电子身份证：\n1. 打开支付宝APP\n2. 搜索"电子身份证"\n3. 按提示完成实名认证\n4. 生成电子证件',
            '💚 微信身份证网证：\n1. 打开微信小程序\n2. 搜索"身份证网证"\n3. 按提示验证身份\n4. 获取网证二维码',
            '🔵 公安部互联网+：\n1. 下载"公安部互联网+"APP\n2. 注册并实名认证\n3. 申请电子身份证\n4. 用于线上身份验证'
          ]
          
          uni.showModal({
            title: '电子身份证获取',
            content: guides[res.tapIndex],
            confirmText: '知道了',
            showCancel: false
          })
        }
      })
    },
    showTempIdGuide() {
      uni.showModal({
        title: '临时身份证办理',
        content: '⏰ 办理流程：\n\n1. 准备材料：户口本、2寸照片2张\n2. 到户籍所在地派出所\n3. 填写《临时身份证申请表》\n4. 缴费并等待制证（当天可取）\n\n💡 提示：临时身份证有效期3个月，具有与正式身份证同等法律效力',
        confirmText: '知道了',
        showCancel: false
      })
    },
    generateApplication() {
      uni.showModal({
        title: '智能生成申请书',
        content: '🤖 智能生成功能：\n\n✅ 根据案件类型智能匹配\n✅ 自动填充基本信息\n✅ 提供法条引用\n✅ 格式规范检查\n✅ 支持多次修改\n\n是否立即使用智能生成功能？',
        confirmText: '立即生成',
        cancelText: '稍后再说',
        success: (res) => {
          if (res.confirm) {
            routerManager.navigateTo('/pages/complaint-generator/index', {
              success: (res) => {
                console.log('跳转到诉状生成页面成功')
              },
              fail: (err) => {
                console.error('跳转失败:', err)
                alert('页面跳转失败')
              }
            })
          }
        }
      })
    },
    downloadTemplate() {
      uni.showModal({
        title: '模板下载指导',
        content: '📥 官方模板获取：\n\n1. 访问当地劳动仲裁委员会官网\n2. 查找"表格下载"栏目\n3. 下载最新版申请书模板\n4. 按要求填写相关信息\n\n💡 提示：不同地区模板可能有差异，建议使用当地官方版本',
        confirmText: '知道了',
        showCancel: false
      })
    },
    trackGuideView(material) {
      // 记录用户查看指导的行为
      const viewRecord = {
        material: material,
        timestamp: new Date().getTime(),
        date: new Date().toLocaleDateString()
      }
      
      this.guideViewHistory.push(viewRecord)
      
      // 保存到本地存储
      try {
        localStorage.setItem('guideViewHistory', JSON.stringify(this.guideViewHistory))
      } catch(e) {
        console.log('保存查看记录失败:', e)
      }
    },
    closeGuideModal() {
      this.showGuideModal = false
      this.guideCurrentStep = 0
    },
    nextGuideStep() {
      if (this.guideCurrentStep < this.currentGuideInfo.steps.length - 1) {
        this.guideCurrentStep++
      }
    },
    prevGuideStep() {
      if (this.guideCurrentStep > 0) {
        this.guideCurrentStep--
      }
    },
    bookmarkGuide() {
      const bookmark = {
        material: this.currentMaterial,
        title: this.currentGuideInfo.title,
        timestamp: new Date().getTime()
      }
      
      // 检查是否已收藏
      const exists = this.guideBookmarks.some(item => item.material === this.currentMaterial)
      
      if (!exists) {
        this.guideBookmarks.push(bookmark)
        uni.showToast({
          title: '已添加到收藏',
          icon: 'success'
        })
        
        // 保存到本地存储
        try {
          localStorage.setItem('guideBookmarks', JSON.stringify(this.guideBookmarks))
        } catch(e) {
          console.log('保存收藏失败:', e)
        }
      } else {
        uni.showToast({
          title: '已在收藏中',
          icon: 'none'
        })
      }
    },
    startProcess() {
      if (this.selectedSolution === null) {
        // 请先选择一个解决方案
        return
      }
      // 开始办理流程，即将跳转到流程详情页面
      // 这里可以跳转到具体的办理页面
    },
    toggleOnlineGuide() {
      this.showOnlineGuide = !this.showOnlineGuide
    },
    openOnlinePortal() {
      if (this.selectedSolution !== null) {
        const solutionTitle = this.solutions[this.selectedSolution].title
        if (solutionTitle === '法院诉讼') {
          uni.showModal({
            title: '跳转提示',
            content: '即将跳转到人民法院诉讼服务网\n\n📱 手机端：12368.court.gov.cn\n💻 PC端：ssfw.court.gov.cn\n\n建议先注册账号并完成实名认证',
            confirmText: '立即跳转',
            cancelText: '取消',
            success: (res) => {
              if (res.confirm) {
                // 实际项目中可以打开新窗口
                // window.open('https://ssfw.court.gov.cn', '_blank')
                console.log('跳转到人民法院诉讼服务网')
              }
            }
          })
        } else if (solutionTitle === '劳动仲裁') {
          uni.showModal({
            title: '跳转提示', 
            content: '即将跳转到劳动仲裁委员会官网\n\n💻 请根据所在地区访问：\n• 北京：rsj.beijing.gov.cn\n• 上海：rsj.sh.gov.cn\n• 其他地区请搜索当地仲裁委官网',
            confirmText: '立即跳转',
            cancelText: '取消',
            success: (res) => {
              if (res.confirm) {
                // 实际项目中可以打开新窗口
                // window.open('https://www.labor-arbitration.gov.cn', '_blank')
                console.log('跳转到劳动仲裁委员会官网')
              }
            }
          })
        }
      }
    },
    downloadGuide() {
      if (this.selectedSolution !== null) {
        const solutionTitle = this.solutions[this.selectedSolution].title
        if (solutionTitle === '法院诉讼') {
          uni.showModal({
            title: '下载操作指南',
            content: '📄 《人民法院网上立案操作指南》\n\n包含内容：\n• 注册登录详细步骤\n• 起诉状在线填写规范\n• 证据材料上传要求\n• 诉讼费缴纳流程\n• 常见问题解答',
            confirmText: '立即下载',
            cancelText: '取消',
            success: (res) => {
              if (res.confirm) {
                // 实际项目中可以触发文件下载
                console.log('下载法院网上立案操作指南')
              }
            }
          })
        } else if (solutionTitle === '劳动仲裁') {
          uni.showModal({
            title: '下载操作指南',
            content: '📄 《劳动仲裁网上申请操作指南》\n\n包含内容：\n• 仲裁平台注册流程\n• 申请书在线填写指导\n• 证据材料准备清单\n• 网上提交注意事项\n• 常见问题解答',
            confirmText: '立即下载',
            cancelText: '取消',
            success: (res) => {
              if (res.confirm) {
                // 实际项目中可以触发文件下载
                console.log('下载劳动仲裁网上申请操作指南')
              }
            }
          })
        }
      }
    },
    supplementQuestion() {
      // 补充问题方法
      if (!this.problemText || this.problemText.trim() === '') {
        uni.showToast({
          title: '请先输入问题描述',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      uni.showModal({
        title: '补充问题描述',
        content: '请输入您想要补充的内容',
        editable: true,
        placeholderText: '请详细描述您的补充内容...',
        success: (res) => {
          if (res.confirm && res.content && res.content.trim() !== '') {
            // 将补充内容添加到原问题描述中
            this.problemText = this.problemText + '\n\n补充说明：' + res.content.trim()
            
            // 重新分析问题
            this.analyzeProblem()
            
            uni.showToast({
              title: '补充成功',
              icon: 'success',
              duration: 2000
            })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 0;
  background-color: #F5F7FA;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: var(--primary-color);
  color: white;
  padding: 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.back-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  transition: background 0.3s ease;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.page-title {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.header-placeholder {
  width: 40px;
}

/* 问题描述区域 */
.problem-section {
  padding: 20px;
}

.problem-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(10, 36, 99, 0.08);
  border: 1px solid var(--border-color);
}

.problem-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.problem-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.problem-type {
  background: var(--primary-color);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.supplement-btn {
  background: linear-gradient(135deg, #8E9AAF 0%, #6B7280 100%);
  color: white;
  border: none;
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(142, 154, 175, 0.2);
  min-width: 80px;
}

.supplement-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(142, 154, 175, 0.3);
  background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%);
}

.supplement-btn:active {
  transform: translateY(0px) scale(0.98);
}

.problem-content {
  margin-bottom: 16px;
}

.problem-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.problem-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background: rgba(10, 36, 99, 0.1);
  color: var(--primary-color);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

/* 风险评估 */
.risk-section {
  padding: 0 20px 20px;
}

.risk-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(10, 36, 99, 0.08);
  border: 1px solid var(--border-color);
}

.risk-level {
  display: flex;
  align-items: center;
  gap: 16px;
}

.risk-icon {
  font-size: 32px;
}

.risk-info {
  flex: 1;
}

.risk-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}

.risk-desc {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: pre-line;
}

.risk-level.medium .risk-title {
  color: #ffc107;
}


/* 解决方案推荐 */
.solutions-section {
  padding: 0 20px 20px;
}

.solutions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}

.expand-icon {
  transition: transform 0.3s ease;
  font-size: 16px;
  color: var(--text-secondary);
}

.expand-icon.collapsed {
  transform: rotate(-90deg);
}

.selected-solution {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(10, 36, 99, 0.08);
  border: 2px solid var(--primary-color);
  margin-bottom: 20px;
}

.selected-solution-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.selected-solution-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.selected-solution-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-primary);
}

.selected-solution-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.selected-solution-badge.recommended {
  background: rgba(40, 167, 69, 0.1);
  color: var(--success-color);
}

.selected-solution-badge.alternative {
  background: rgba(108, 117, 125, 0.1);
  color: var(--text-secondary);
}

.selected-solution-badge.fast {
  background: rgba(255, 193, 7, 0.1);
  color: var(--warning-color);
}

.selected-solution-badge.notary {
  background: rgba(255, 193, 7, 0.1);
  color: var(--warning-color);
}

.selected-solution-stats {
  display: flex;
  gap: 20px;
}

.selected-solution-stats .stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selected-solution-stats .stat-label {
  font-size: 12px;
  color: var(--text-muted);
}

.selected-solution-stats .stat-value {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-primary);
}

.solutions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.solution-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(10, 36, 99, 0.08);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.solution-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 36, 99, 0.15);
}

.solution-card.active {
  border-color: var(--primary-color);
  box-shadow: 0 8px 24px rgba(10, 36, 99, 0.2);
}

.solution-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.solution-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-primary);
}

.solution-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.solution-badge.recommended {
  background: rgba(40, 167, 69, 0.1);
  color: var(--success-color);
}

.solution-badge.alternative {
  background: rgba(108, 117, 125, 0.1);
  color: var(--text-secondary);
}

.solution-badge.fast {
  background: rgba(255, 193, 7, 0.1);
  color: var(--warning-color);
}

.solution-badge.notary {
  background: rgba(255, 193, 7, 0.1);
  color: var(--warning-color);
}

.solution-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.solution-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
}

.stat-value {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-primary);
}

.solution-actions {
  display: flex;
  gap: 12px;
}

.solution-actions .btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 14px;
}

/* 流程详情 */
.process-section {
  padding: 0 20px 20px;
}


.process-timeline {
  position: relative;
  padding-left: 30px;
}

.process-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
}

.process-step {
  position: relative;
  margin-bottom: 32px;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(10, 36, 99, 0.08);
  border: 1px solid var(--border-color);
}

.process-step::before {
  content: '';
  position: absolute;
  left: -37px;
  top: 20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border-color);
  border: 3px solid white;
  z-index: 1;
}

.process-step.active::before {
  background: var(--primary-color);
}

.step-number {
  position: absolute;
  left: -45px;
  top: 16px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: var(--text-secondary);
  z-index: 2;
}

.process-step.active .step-number {
  background: var(--primary-color);
  color: white;
}

/* 步骤标题行 - 支持标题和按钮并排显示 */
.step-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 12px;
}

.step-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  flex: 1;
}

/* 材料说明按钮 */
.material-instruction-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.material-instruction-btn:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.material-instruction-btn:active {
  transform: translateY(0);
}

.material-instruction-btn .btn-icon {
  font-size: 14px;
}

.step-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.5;
}

.step-details {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.step-time, .step-cost {
  font-size: 12px;
  color: var(--text-muted);
}

.materials-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.materials-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.material-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
  color: var(--text-secondary);
}

.material-item:last-child {
  border-bottom: none;
}

.material-text {
  flex: 1;
}

/* 内联快速生成诉状按钮样式 */
.quick-generate-btn-inline {
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  color: white;
  border: none;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 7px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 5px rgba(255, 107, 53, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 5px;
  flex-shrink: 0;
}

.quick-generate-btn-inline:hover {
  background: linear-gradient(135deg, #E55A2B 0%, #E8821A 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 7px rgba(255, 107, 53, 0.4);
}

.quick-generate-btn-inline:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(255, 107, 53, 0.3);
}

.btn-icon {
  font-size: 8px;
}

/* 材料获取指导按钮样式 */
.material-guide-btn-inline {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  color: white;
  border: none;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 7px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 5px rgba(23, 162, 184, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 5px;
  flex-shrink: 0;
}

.material-guide-btn-inline:hover {
  background: linear-gradient(135deg, #138496 0%, #0f6674 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 7px rgba(23, 162, 184, 0.4);
}

.material-guide-btn-inline:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(23, 162, 184, 0.3);
}

/* 材料获取指导弹窗样式 */
.guide-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 10px;
}

.guide-modal {
  background: white;
  border-radius: 12px;
  max-width: 90vw;
  max-height: 85vh;
  width: 600px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: modalSlideIn 0.3s ease-out;
}

/* 材料清单表格样式 */
.material-table-container {
  margin: 20px 0;
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.material-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: white;
}

.material-table th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
}

.material-table th:first-child {
  border-top-left-radius: 8px;
}

.material-table th:last-child {
  border-top-right-radius: 8px;
}

.material-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}

.material-table tr:hover {
  background-color: #f8f9ff;
}

.material-table tr:last-child td {
  border-bottom: none;
}

.description-cell {
  white-space: pre-line;
  line-height: 1.5;
  max-width: 200px;
}

.copies-cell {
  min-width: 120px;
  text-align: center;
  color: var(--primary-color);
}

.notes-cell {
  color: #666;
  font-size: 13px;
  line-height: 1.4;
  max-width: 150px;
}

/* 提示部分样式 */
.tips-section {
  margin-top: 24px;
  padding: 16px;
  background: #f8f9ff;
  border-radius: 8px;
  border-left: 4px solid var(--primary-color);
}

.tips-section h4 {
  margin: 0 0 12px 0;
  color: var(--primary-color);
  font-size: 16px;
}

.tips-list {
  margin: 0;
  padding-left: 20px;
}

.tips-list li {
  margin-bottom: 8px;
  line-height: 1.5;
  color: #555;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #eee;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.guide-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.guide-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.guide-title-info h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.guide-meta {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.difficulty-badge, .time-badge, .success-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.difficulty-easy {
  background: #d4edda;
  color: #155724;
}

.difficulty-medium {
  background: #fff3cd;
  color: #856404;
}

.difficulty-hard {
  background: #f8d7da;
  color: #721c24;
}

.time-badge {
  background: #e3f2fd;
  color: #1565c0;
}

.success-badge {
  background: #e8f5e8;
  color: #2e7d2e;
}

.guide-close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #f8f9fa;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #666;
  transition: all 0.2s ease;
}

.guide-close-btn:hover {
  background: #e9ecef;
  color: #333;
}

.guide-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 20px;
}

.guide-section {
  margin: 20px 0;
}

.guide-section h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-overview {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #17a2b8;
}

.guide-overview p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

.guide-steps {
  background: white;
}

.steps-header {
  margin-bottom: 15px;
}

.step-progress {
  margin-top: 8px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #17a2b8, #20c997);
  transition: width 0.3s ease;
}

.step-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
}

.step-header {
  background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
  color: white;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-number {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
}

.step-header h5 {
  margin: 0;
  flex: 1;
  font-size: 16px;
}

.step-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  opacity: 0.9;
}

.step-content {
  padding: 15px;
}

.step-description {
  margin: 0 0 15px 0;
  color: #666;
  line-height: 1.5;
}

.step-tips, .step-alternatives {
  margin-top: 15px;
}

.step-tips h6, .step-alternatives h6 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.step-tips ul {
  margin: 0;
  padding-left: 20px;
}

.step-tips li {
  margin: 4px 0;
  color: #666;
  line-height: 1.4;
}

.alternatives-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.alternative-tag {
  background: #e9ecef;
  color: #495057;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.alternative-tag:hover {
  background: #17a2b8;
  color: white;
}

.step-navigation {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
}

.nav-btn {
  flex: 1;
  padding: 8px 16px;
  border: 1px solid #dee2e6;
  background: white;
  color: #666;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nav-btn:not(:disabled):hover {
  background: #f8f9fa;
  border-color: #17a2b8;
  color: #17a2b8;
}

.nav-btn.primary {
  background: #17a2b8;
  color: white;
  border-color: #17a2b8;
}

.nav-btn.primary:not(:disabled):hover {
  background: #138496;
  border-color: #138496;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.quick-action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-action-card:hover {
  border-color: #17a2b8;
  background: #f8fdff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.15);
}

.action-icon {
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3f2fd;
  border-radius: 8px;
}

.action-info h5 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.action-info p {
  margin: 0;
  font-size: 12px;
  color: #666;
  line-height: 1.3;
}

.alternatives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.alternative-item {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
  color: #666;
  border-left: 3px solid #17a2b8;
}

.faqs {
  space-y: 12px;
}

.faq-item {
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.faq-question {
  background: #e9ecef;
  padding: 12px 15px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.faq-answer {
  padding: 12px 15px;
  color: #666;
  line-height: 1.5;
  font-size: 14px;
}

.legal-basis {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 6px;
  padding: 12px;
  color: #856404;
  font-size: 14px;
  line-height: 1.4;
}

.related-materials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.related-material-tag {
  background: #e3f2fd;
  color: #1565c0;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.related-material-tag:hover {
  background: #1565c0;
  color: white;
  transform: translateY(-1px);
}

.guide-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  border-top: 1px solid #eee;
  background: #f8f9fa;
}

.footer-btn {
  flex: 1;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.footer-btn.outline {
  background: white;
  color: #17a2b8;
  border: 1px solid #17a2b8;
}

.footer-btn.outline:hover {
  background: #17a2b8;
  color: white;
}

.footer-btn.primary {
  background: #17a2b8;
  color: white;
  border: 1px solid #17a2b8;
}

.footer-btn.primary:hover {
  background: #138496;
  border-color: #138496;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .guide-modal {
    max-width: 95vw;
    max-height: 90vh;
    margin: 10px;
  }
  
  .guide-header {
    padding: 15px;
  }
  
  .guide-content {
    padding: 0 15px 15px;
  }
  
  .guide-footer {
    padding: 12px 15px;
  }
  
  .quick-actions {
    grid-template-columns: 1fr;
  }
  
  .alternatives-grid {
    grid-template-columns: 1fr;
  }
  
  .guide-meta {
    flex-wrap: wrap;
  }
  
  /* 移动端表格样式 */
  .material-table-container {
    margin: 15px 0;
    overflow-x: auto;
  }
  
  .material-table {
    font-size: 12px;
    min-width: 600px; /* 确保表格有最小宽度，可以横向滚动 */
  }
  
  .material-table th {
    padding: 8px 6px;
    font-size: 11px;
  }
  
  .material-table td {
    padding: 8px 6px;
  }
  
  .description-cell {
    max-width: 150px;
    font-size: 11px;
  }
  
  .copies-cell {
    min-width: 100px;
    font-size: 11px;
  }
  
  .notes-cell {
    max-width: 120px;
    font-size: 11px;
  }
  
  .tips-section {
    margin-top: 16px;
    padding: 12px;
  }
  
  .tips-section h4 {
    font-size: 14px;
  }
  
  .tips-list li {
    font-size: 12px;
    margin-bottom: 6px;
  }
  
  .step-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .step-meta {
    width: 100%;
    margin-top: 8px;
  }
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 16px 20px;
  box-shadow: 0 -4px 20px rgba(10, 36, 99, 0.1);
  border-top: 1px solid var(--border-color);
  z-index: 100;
}

.total-summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.summary-label {
  font-size: 12px;
  color: var(--text-muted);
}

.summary-value {
  font-size: 16px;
  font-weight: bold;
  color: var(--accent-color);
}

.start-process-btn {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .solution-stats {
    flex-direction: column;
    gap: 12px;
  }
  
  .solution-actions {
    flex-direction: column;
  }
  
  .total-summary {
    flex-direction: column;
    gap: 8px;
  }
  
  .selected-solution-stats {
    flex-direction: column;
    gap: 12px;
  }
  
  .selected-solution-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
}

/* 律师选择模态框 */
/* 网上提交流程详解样式 */
.online-submission-guide {
  margin-top: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #0A2463 0%, #1E3A8A 100%);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.guide-header:hover {
  background: linear-gradient(135deg, #082A5A 0%, #1A2F7A 100%);
}

.guide-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.guide-toggle {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.guide-toggle.expanded {
  transform: rotate(90deg);
}

.guide-content {
  padding: 16px;
  background: white;
}

.guide-steps {
  margin-bottom: 16px;
}

.guide-step {
  display: flex;
  margin-bottom: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 3px solid #0A2463;
  transition: all 0.3s ease;
}

.guide-step:hover {
  background: #f1f5f9;
  transform: translateX(2px);
}

.guide-step-number {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #0A2463 0%, #1E3A8A 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  margin-right: 12px;
  flex-shrink: 0;
}

.guide-step-content {
  flex: 1;
}

.guide-step-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
  line-height: 1.3;
}

.guide-step-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 8px;
}

.guide-step-tips {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: 8px;
}

.tips-title {
  font-size: 12px;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 6px;
}

.tips-list {
  margin: 0;
  padding-left: 12px;
}

.tips-list li {
  font-size: 12px;
  color: #92400e;
  line-height: 1.3;
  margin-bottom: 2px;
}

.guide-footer {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

.guide-footer .btn {
  flex: 1;
  max-width: 160px;
  padding: 8px 16px;
  font-size: 13px;
}

/* 响应式设计 - 移动端更紧凑 */
@media (max-width: 768px) {
  .step-title-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }
  
  .step-title {
    font-size: 14px;
    flex: 1 1 auto;
    min-width: 0; /* 允许收缩 */
  }
  
  .material-instruction-btn {
    font-size: 11px;
    padding: 5px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .online-submission-guide {
    margin-top: 12px;
  }
  
  .guide-header {
    padding: 10px 12px;
  }
  
  .guide-title {
    font-size: 13px;
  }
  
  .guide-content {
    padding: 12px;
  }
  
  .guide-step {
    margin-bottom: 8px;
    padding: 10px;
  }
  
  .guide-step-number {
    width: 20px;
    height: 20px;
    font-size: 11px;
    margin-right: 10px;
  }
  
  .guide-step-title {
    font-size: 13px;
    margin-bottom: 4px;
  }
  
  .guide-step-desc {
    font-size: 12px;
    margin-bottom: 6px;
  }
  
  .guide-step-tips {
    padding: 6px;
  }
  
  .tips-title {
    font-size: 11px;
    margin-bottom: 4px;
  }
  
  .tips-list li {
    font-size: 11px;
    margin-bottom: 1px;
  }
  
  .guide-footer {
    padding-top: 10px;
    gap: 6px;
  }
  
  .guide-footer .btn {
    padding: 6px 12px;
    font-size: 12px;
    max-width: 140px;
  }
}

</style>